<template>
  <div class="dialog" :class="type" v-if="isShow">
    <div class="dialog_content"><slot></slot></div>
    <!-- <span class="dialog_row"></span> -->
  </div>
</template>
<script>
export default {
  name: "Dialog",
  props: {
    isShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    type: {
      type: String,
      default() {
        return "bottom";
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less">
@base: 23.44rem;
.dialog {
  position: fixed;
  left: 0;
  right: 0;
  padding: 10 / @base;
  z-index: 99997;
  &.top {
    top: 45 / @base;
  }
  &.bottom {
    bottom: 46 / @base;
  }
  &.center {
    top: 45 / @base;
    bottom: 46 / @base;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialog_row {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    display: block;
  }
}
</style>
